<template>
	<view class="count poRel">
		<view class="wid100 poAbs" style="height: 775rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poRel" style="z-index: 2;">
			<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
				<!-- 状态栏高度 -->
				<view :style="{ height: `${statusBarHeight}px` }"></view>
				<!-- 自定义导航栏高度 并 居中 -->
				<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
					<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
						<image src="../../../static/fanhui.png" class="wh100"></image>
					</view>
					<view class="foSi35" style="line-height: 36rpx;">会员中心</view>
				</view>
			</view>
			<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
			<swiper class="mar-top20" :current="current" previous-margin="42rpx" next-margin="42rpx" @change="swiperChange">
				<swiper-item v-for="(item,index) in list" :key='index'>
					<view class="wid100" :style="'background-image: url('+item.bgImg+');color:'+item.color+';'"
						style="height: 306rpx;box-sizing: border-box;background-size: 100% 100%;">
						<view style="height: 97rpx;"></view>
						<view class="wid85 mar">
							<view class=" foSi30 fowe600" style="line-height: 30rpx;">{{user.userName}}</view>
							<view class="mar-top10 foSi24">2024-01-30至2024-12-30</view>
							<view class="dis disJuB mar-top10" style="align-items: flex-end;">
								<view class="bacFFF borRad40 dis disAl disJuC foSi22" :style="{color:tColor}" style="width: 213rpx;height: 36rpx;">已为您节省103元</view>
								<view class="foSi50 fowe600" style="line-height: 50rpx;">{{item.name}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="wid90 mar mar-top10 bacFFF borRad20" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
				<view class="dis disAl disJuB poRel wid95 mar" style="padding: 25rpx 0;">
					<view class="poAbs" style="width: 586rpx;height: 4rpx;background-color: #E7E7E7;top: 68rpx;left: 18rpx;"></view>
					<view class="poAbs" :style="'width: '+wid+'rpx;background-color: '+tColor+';'"
					style="height: 4rpx;top: 68rpx;left: 18rpx;"></view>
					<block v-for="(item,index) in list" :key="index">
						<view class="textCen poRel" style="z-index: 10;">
							<view class="foSi18" style="color: #969696;">{{item.condition}}</view>
							<view class="borRad50 mar-top10 mar-bott10 mar" style="width: 16rpx;height: 16rpx;"
								:style="widIndex >= index?'background-color: '+tColor+';':'background-color: #E7E7E7;'"></view>
							<view class="fowe600 foSi20" :style="widIndex >= index?'color: '+tColor+';':''">{{item.name}}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="wid90 mar mar-top20" style="height: 322rpx;">
				<image :src="urlImage+'/wechatimg/jiameng.png'" mode="scaleToFill" class="wh100 borRad20"></image>
			</view>
			<view class="wid90 mar mar-top30">
				<view class="dis disAl disJuB">
					<view class="fowe800 foSi32 poRel" style="line-height: 32rpx;">
						<view class="poRel" style="z-index: 10;">会员分销</view>
						<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;"></view>
					</view>
					<view v-if="current > 0" class="dis disAl disJuC borRad40 coFFF foSi25" style="width: 140rpx;height: 52rpx;background-color: #FF5853;">分销中心</view>
				</view>
				<view class="mar-top40 foSi25" style="color: #737373;">{{current==0?'普通消费者':current==1?'消费1000元成为会员':
					current==2?'消费20000元成为酒庄':current==3?'消费15万元成为移动酒庄':'消费30万成为省级服务商'}}</view>
				<!-- <view class="fowe800 foSi32 poRel mar-top30" style="line-height: 32rpx;">
					<view class="poRel" style="z-index: 10;">会员套餐</view>
					<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;"></view>
				</view>
				<view class="dis mar-top30 fowe600 foSi25" style="justify-content: space-around;">
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
				</view> -->
				
				<view class="dis disAl disJuB mar-top20">
					<view class="fowe800 foSi32 poRel" style="line-height: 32rpx;">
						<view class="poRel" style="z-index: 10;">会员权益</view>
						<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;"></view>
					</view>
					<view v-if="user.cardName == '云酒庄'" @click="go({url:'/yb_wm/my/redeem/redeemList'})" class="dis disAl foSi22" style="color: #737373;">
						<view style="margin-right: 6rpx;">查看全部</view>
						<uni-icons type="right" size="22rpx" color="#737373"></uni-icons>
					</view>
				</view>
				<view class="mar-top30 foSi25" style="color: #737373;">
					<block v-if="user.cardName != '云酒庄'" v-for="(item,index) in list[current].tipmsg" :key="index">
						<view>{{item}}</view>
					</block>
					<view v-if="user.cardName == '云酒庄'">
						<view class="wid100 poRel" :style="'background-image: url('+urlImage+'/wechatimg/linshi2.png);'" style="height: 194rpx;box-sizing: border-box;
							background-size: 100% 100%;">
							<view style="height: 50rpx;"></view>
							<view class="dis fowe600">
								<view class="foSi45 textCen" style="width: 180rpx;color: #DF132A;line-height: 45rpx;">20<span class="foSi35">个</span></view>
								<view class="mar-left30 foSi30" style="color: #000;">兑换码</view>
							</view>
							<view class="dis mar-top10 foSi22" style="color: #737373;">
								<view class="textCen" style="width: 180rpx;">使用规则</view>
								<view class="mar-left30">有效期至2024-06-10</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="fowe800 foSi32 poRel mar-top20" style="line-height: 32rpx;">
					<view class="poRel" style="z-index: 10;">会员送好礼</view>
					<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;"></view>
				</view>
				<view class="dis mar-top30 fowe600 foSi25" style="justify-content: space-around;">
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
					<view class="textCen">
						<view class="mar" style="width: 184rpx;height: 141rpx;">
							<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20"></image>
						</view>
						<view class=" mar-top20">产品套餐名称</view>
					</view>
				</view> -->
			</view>
		</view>
		<view style="height: 230rpx;"></view>
		<view class="wid100 bacFFF mar-top40 poFix" style="padding: 20rpx 0;bottom: 0;z-index: 3;">
			<view class="textCen foSi22" style="color: #999999;">开通即视为阅读并同意<span :style='{color:tColor}'>《xx开卡须知》</span></view>
			<view class="wid90 mar borRad40 dis disAl disJuC mar-top10 coFFF" v-if="widIndex+1 == list.length"
			 :style="'background: linear-gradient(90deg, '+tColor+', #FF625E);'" style="height: 94rpx;">已是最高等级</view>
			<view class="wid90 mar borRad40 dis disAl disJuC mar-top10 coFFF" v-if="current > widIndex && widIndex+1 != list.length"
			 :style="'background: linear-gradient(90deg, '+tColor+', #FF625E);'" style="height: 94rpx;"
				@click="kaitong(list[current])">￥{{list[current].condition}} 立即升级到{{list[current].name}}</view>
			<view class="wid90 mar borRad40 dis disAl disJuC mar-top10 coFFF" v-if="current <= widIndex && widIndex+1 != list.length"
			 :style="'background: linear-gradient(90deg, '+tColor+', #FF625E);'" style="height: 94rpx;"
				@click="kaitong(list[widIndex+1])">￥{{list[widIndex+1].condition}} 立即升级到{{list[widIndex+1].name}}</view>
			<view style="height: 40rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import utils from '@/common/utils';
	export default {
		name: 'wkk',
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				huiyuan: 140000,
				wid: 0,
				widIndex: 0,
				list: [],
				current: 0
			}
		},
		async onLoad() {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getList()
		},
		onShow() {},
		methods: {
			async kaitong(item) {
				let res = await this.util.request({
					'url': this.api.kthy,
					data: {
						userId: uni.getStorageSync('userId'),
						level_id: item.id
					}
				})
				console.log(res)
				if(res.code == 1){
					this.kthyzf(res.data)
				}
			},
			async kthyzf(orderId) {
				let payres = await this.util.request({
					'url': this.api.pay,
					method: 'POST',
					mask: 1,
					data: {
						orderId: orderId,
						payType: 3,
						orderType: 10
					},
				})
				if (payres) {
					uni.requestPayment({
						provider: this.provider,
						timeStamp: payres.data.timeStamp,
						nonceStr: payres.data.nonceStr,
						package: payres.data.package,
						signType: payres.data.signType,
						paySign: payres.data.paySign,
						success: (res) => {
							setTimeout(() => {
								this.fanhui()
							}, 1000)
						},
						fail: (err) => {
							console.log('fail:' + JSON.stringify(err))
							if (err.errMsg == 'requestPayment:fail cancel') {
								this.util.message('取消支付', 2)
							} else {
								uni.showModal({
									title: '提示',
									content: err.errMsg + err.err_desc,
									showCancel: false
								})
								this.loading = false;
							}
						},
						complete: (e) => {
							console.log("paymentcomplete", e)
						}
					});
				}
			},
			async getList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.hydj,
					data: {
						userId: uni.getStorageSync('userId')
					}
				})
				this.list = data
				if(this.uId){
					for(var i=0; i<this.list.length; i++){
						if(this.user.cardName == this.list[i].name){
							this.wid = this.list[i].condition<1000?0:this.list[i].condition<20000?136:this.list[i].condition<150000?272:this.list[i].condition<300000?436:586
							console.log(this.wid)
							this.widIndex = i
							this.current = i
						}
					}
				}else{
					this.wid = 0
					this.widIndex = 0
				}
				console.log(data)
			},
			fanhui(){
				uni.navigateBack(1)
			},
			swiperChange(e){
				console.log(e.detail.current)
				this.current = e.detail.current
				this.$forceUpdate()
			}
		},
	}
</script>
<style scoped lang="scss">
	.count {
		min-height: 100vh;
		background-color: #F6F6F6;
	}
</style>